import styles from './list.module.scss'
import { Input,Button,Spin } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import type { questionType } from '@/utils/type'
import QuestionCard from '@/components/questionCard'
import { useTitle} from 'ahooks'
import useSearchQuestion from '@/hooks/useSearchQuestion'
import useLoadQuestionList from '@/hooks/useLoadQuestionList'
import ListPagination from '@/components/listPagination'


const Star = ()=>{
  useTitle('Shaun-标星问卷列表')
  const {data=[],loading} = useLoadQuestionList({isStar:true})
  const {inputRef,handleSearch} =useSearchQuestion()

  return (
    <div className={styles.container}>
      {/* 头部 */}
      <div className={styles.header}>
        {/* 左部 */}
        <div className={styles.left}>标星问卷</div>
        {/* 右部 */}
        <div className={styles.right}>
           <Input ref={inputRef} placeholder='请输入标题'></Input>
           <Button icon={<SearchOutlined />}  onClick={handleSearch} />
        </div>
      </div>
      {/* 主体列表 */}
      <div className={styles.list}>
        <div className={styles.item}>
          {loading ? <Spin style={{width:'100%',textAlign:'center'}}/>  : Array.isArray(data)  &&data.map((item:questionType)=>(
             <QuestionCard  item={item} key={item.id}  />
          ))}
        </div>
      </div>
      {/* 分页 */}
      <div className={styles.pagination}>
        <ListPagination total={100}></ListPagination>
      </div>
    </div>
  )
}


export default Star
